<template>       
<el-container class="home-container">
    <!-- 头部区域 -->
     <el-header>
          <span> 熬夜写博客ing</span>
          <div>
      <el-button type="text" @click="logout">退出</el-button>
       <el-button  type="text" @click="login">登录</el-button>
       </div>
      </el-header>
  <!-- 页面主体区域 -->
  <el-container>
  <el-main>Main</el-main>
  </el-container>
  <!-- 页面尾部 -->
  <el-footer>Footer</el-footer>
</el-container>

</template>

<script>
export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
        login(){
            this.$router.push("login")
        }
    }
}
</script>
<style scoped>
.el-header{
background-color:wheat ;
color: red;
font-size: 20px;
font-style: italic;
box-shadow: 10px 10px 5px blueviolet;
}
.el-header div{
 float: right;
}
.el-header span{
    margin-left: 15px;
}
.el-main{
    background-color: #eaedf1;
}
.el-footer{
    background-color: #373d41;
}
.home-container{
    height: 100%;
}
.el-aside{
     background-color:#545c64;
}
</style>